<template>
  <div class="Porderpingjia">
     <Pheader class="tou" msg="订单评价"/>
     <div class="main" style="border-bottom:1px dashed #e7e7e7;">
        <div class="pingjia">
          <div>
            <div class="tu1">
                <img src="../assets/images/banner-13.png" alt="">
            </div>
            <p class="zi">珍享 南非进口红心葡萄柚 西柚柚子</p>
          </div>
        </div>
        
        <div class="detail">
          <div class="pingxing"> 
            <p style="margin-right:20px;">商品评分</p>
            <el-rate v-model="value" show-text>
            </el-rate>
          </div>
          <div class="pingxing">
            <p style="margin-right:20px;margin-top:10px;">评价商品</p>
            <textarea style="margin-top:10px;max-width:500px;max-height:100px;min-width:500px;min-height:100px;" placeholder="商品评价，最少10个字，最多50个字"></textarea>
          </div>
          <div>
            <p style="margin-right:20px;margin-top:10px;">晒图片</p>
            <div class="tupianquyu">
                <div class="shaitu">
                  <el-upload   id="shaiImg" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="50%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </div>
                <div class="shaitu">
                  <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                </div>
                <div class="shaitu">
                  <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                </div>
                <div class="shaitu">
                  <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                </div>
            </div>
          </div>
        </div>
     </div>
     <div class="main" style="border-bottom:1px solid #e7e7e7;">
        <div class="pingjia">
          <div>
            <div class="tu1">
                <img src="../assets/images/banner-14.png" alt="">
            </div>
            <p class="zi" style="margin-bottom:15px;">珍享 南非进口红心葡萄柚 西柚柚子</p>
          </div>
        </div>
        <div class="detail">
          <div class="pingxing"> 
            <p style="margin-right:20px;">商品评分</p>
            <el-rate  v-model="value" show-text>
            </el-rate>
          </div>
          <div class="pingxing">
            <p style="margin-right:20px;margin-top:10px;">评价商品</p>
            <textarea style="margin-top:10px;max-width:500px;max-height:100px;min-width:500px;min-height:100px;" placeholder="商品评价，最少10个字，最多50个字" ></textarea>
          </div>
          <div>
            <p style="margin-right:20px;margin-top:10px;">晒图片</p>
            <div class="tupianquyu">
                <div class="shaitu">
                  <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                </div>
                <div class="shaitu">
                  <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                </div>
                <div class="shaitu">
                  <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                </div>
                <div class="shaitu">
                  <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                </div>
            </div>
          </div>
        </div>
     </div>
     <div class="bottom">
       <div class="zongping">
          <div class="pingxing pingjia1"> 
              <p style="margin-right:20px;">服务态度</p>
              <el-rate v-model="value" show-text>
              </el-rate>
          </div>
          <div class="pingxing"> 
              <p style="margin-right:20px;">描述相符</p>
              <el-rate v-model="value" show-text>
              </el-rate>
          </div>
      </div>
      <Pbutton style="margin: 20px 40% " msg="提交评价"/>
     </div>
  </div>
</template>
<script>
import Pheader from '@/components/P_header.vue'
import Pbutton from '@/components/P_button.vue'
export default {
  name: "Porderpingjia",
  components: {
     Pheader,
     Pbutton
  },
   data() {
      return {
        value: null,
        dialogImageUrl: '',
        dialogVisible: false
      }
    },
     methods: {
      // handleRemove(file, fileList) {
      //   console.log(file, fileList);
      // },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>
<style scoped>
    .Porderpingjia{
    width: 100%;
    /* height: 488px; */
    border: 1px solid #e7e7e7;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 2;
    overflow: hidden;
   }
    .Porderpingjia .tou{
    padding:12px 13px;
    border-bottom: 1px solid #e7e7e7;
    display:flex;
}
.Porderpingjia .main{
  display: flex;
  margin:20px 13px 0px 13px;
  padding-bottom: 15px;
}
.Porderpingjia .main .tu1{
  width:75%;
  border:1px solid #e7e7e7;
}
.Porderpingjia .main .tu1 img{
  width:80%;
  margin-left:10%;
}
.Porderpingjia .main .zi{
  margin-top:10px;
  font-size:12px;
}

.Porderpingjia  .pingxing{
  display:flex;
}
.Porderpingjia .main .detail .tupianquyu{
  display: flex;
  /* display: inline-block;
  float:left; */
}
.Porderpingjia .main .detail .shaitu{
  margin-right:10px;
}
.Porderpingjia .zongping{
  display:flex;
}
.Porderpingjia .bottom{
  margin-top:30px;
  text-align: center;
}
.Porderpingjia .pingjia1{
  margin-right:40px;
  margin-left:20%;
}


</style>